
new Vue({
 el:'#gameInfo_C',
 data:{
   gameInfo:{}, 
   games:[],
   topNum:'',
   roofArr:[],
 },
 methods:{
   readFile(){
     let _id = getUrlParams()._id;
     this.$http.get('./moongoDB/games').then(response =>{
       let res = response.body;
       if(res){
         let games = res;
         this.games = games;
         // 先排序
         games = games.sort(valueSortBy("score","name")).reverse();

         // 添加属性排行号 
         games.forEach(function(el,index){
            el.topNum = index + 1;
         })

         // 再获取详细信息
         this.gameInfo = games.filter((game,index) => {          
            return game._id == _id;
         })[0]; 

         // 标题替换
         document.title = `${this.gameInfo.name} | Z-anime`;

         this.gameInfo.imgArr = this.gameInfo.imgArr.reverse();

         // 获取平台数组
         var roofArr = ['安卓','苹果','网页','PS4','PC']
         this.roofArr = roofArr.filter(item=>(this.gameInfo.roof.indexOf(item) != -1))     
         
       }
     },response=>{
       console.log('请求数据失败！');  
     });
   },
  
  // 去主页
  toIndexClick(){
    window.location.href='/';
  },
  // 去游戏
  toGameClick(){
    window.location.href = '/game';
   },
  toDownload(url){
    window.open(url,'_blank')
  },
  swiperIf(){
    setTimeout(()=>{
      var h = $('.swiper-slide').first().height();
      var w = $('.swiper-slide').first().width();
      
      if(h/w <= 1){this.swiper(2);
      }else{ this.swiper(4);} 
      // 按钮位置重置    
      $('.button').css('top',-$('.swiper-container').height()/1.9);         
    },300)
  },
  // num+1张图
  swiper(num){
      var swiper = new Swiper('.swiper-container',{
      autoplay: false,
      autoHeight: true,
      speed: 1000,
      autoplayDisableOnInteraction: false,
      preventLinksPropagation:true,
      loop: true,
      centeredSlides: true,
      slidesPerView: num,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      prevButton: '.swiper-button-prev',
      nextButton: '.swiper-button-next',
      onInit: function(swiper) {
        swiper.slides[num].className = "swiper-slide swiper-slide-active";
      },
      breakpoints: {
        668: {
          slidesPerView: 1,
        }
      }
    });
  },
  

  },

  
   

 beforeCreate(){
  
 },

 created(){
  this.readFile();
  // 路由标题
  $('.urlTitle').html(`{{gameInfo.name}}`);
  // 信息
    // 名称
    $('.mainContent .title').html(`{{gameInfo.name}}<br><div class="eName">{{gameInfo.eName}}</div>`);
    // 图片
    $('.mainContent .img').html(`<img :src="gameInfo.imgUrl" />`);
    // 排行
    $('.topNum').html(`{{gameInfo.topNum}}`);
    // 时间
    $('.date').append(`<span>{{gameInfo.year}}-{{gameInfo.month}}-{{gameInfo.day}}</span>`);
    // 类型
    $('.gameType').append(`<span>{{gameInfo.gameType}}</span>`);
    // 状态
    $('.state').append(`<span>{{gameInfo.state}}</span>`)
    // 产地
    $('.area').append(`<span>{{gameInfo.area}}</span>`)
    // 开发商
    $('.maker').append(`<span>{{gameInfo.maker}}</span>`)
    // 运营商
    $('.publisher').append(`<span>{{gameInfo.publisher}}</span>`)
    // 游戏简介
    $('.content').append(`<span>{{gameInfo.content}}</span>`)

    // 游戏下载
    $('.others').append(`
    <div class="download pc" v-if="roofArr.indexOf('PC')!=-1" @click="toDownload(gameInfo.webUrl)">PC 下载
    <div class="logo dLogo"></div>
    </div>
    <div class="download android" v-if="roofArr.indexOf('安卓')!=-1" @click="toDownload(gameInfo.webUrl)">Android 下载
    <div class="logo dLogo"></div>
    </div>
    <div class="download ios" v-if="roofArr.indexOf('苹果')!=-1" @click="toDownload(gameInfo.webUrl)">Ios 下载
    <div class="logo dLogo"></div>
    </div>
    <div class="download psp" v-if="roofArr.indexOf('PS4')!=-1" @click="toDownload(gameInfo.webUrl)">PS4 下载
    <div class="logo dLogo"></div>
    </div>
    `)

    // 游戏评价
    $('.evalPhoto .evaluate').html(`{{gameInfo.evaluate}}`)

    // 游戏评分
    $('.score').prepend(`
    <div class="stars">
      <div class="star star0" v-if="gameInfo.score<=0"></div>
      <div class="star star05" v-else-if="gameInfo.score<=1"></div>
      <div class="star star1" v-else></div>

      <div class="star star0" v-if="gameInfo.score<=2"></div>
      <div class="star star05" v-else-if="gameInfo.score<=3"></div>
      <div class="star star1" v-else></div>

      <div class="star star0" v-if="gameInfo.score<=4"></div>
      <div class="star star05" v-else-if="gameInfo.score<=5"></div>
      <div class="star star1" v-else></div>

      <div class="star star0" v-if="gameInfo.score<=6"></div>
      <div class="star star05" v-else-if="gameInfo.score<=7"></div>
      <div class="star star1" v-else></div>

      <div class="star star0" v-if="gameInfo.score<=8"></div>
      <div class="star star05" v-else-if="gameInfo.score<=9"></div>
      <div class="star star1" v-else></div>

    </div>
   `)
   $('.scoreNum').html(`{{parseFloat(gameInfo.score).toFixed(1)}}`)

   // 游戏截图
   $(' .imgArr').html(`
   <div class="swiper-slide" v-for="(item,index) in gameInfo.imgArr">
    <a :href="item" target="_blank">
      <img :src="item">
    </a>
     <div class="layer-mask"></div>
    </div>
   `)
   
 },
 beforeMount(){   
   
},
 mounted(){   
  this.swiperIf();
 },
 updated(){
   
 }
 
});